<template>
  <div class="item-wrapper">
    <div class="rl-content">
      <div class="search-box" ref="searchBar">
        <el-form :model="form" ref="form" size="medium" label-width="75px" class="demo-form">
          <el-row>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="用户姓名" prop="personName">
                <el-input placeholder="请输入用户姓名" v-model.trim="form.personName" clearable @clear="handleSearch"
                  @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="卡号" prop="cardNo">
                <el-input placeholder="请输入卡号" v-model.trim="form.cardNo" clearable @clear="handleSearch"
                  @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="关联项目" prop="cardType">
                <el-select style="width: 100%;" v-model="form.cardType" placeholder="请选择关联项目" clearable
                  @change="handleSearch">
                  <el-option v-for="item in cardTypeOptions" :key="item.cardType" :label="item.cardTypeName"
                    :value="item.cardType" @change="handleSearch">
                    <span>{{ item.cardTypeName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :xs="12" :sm="12" :md="8" :lg="12" :xl="6">
              <el-form-item label="统计时间" prop="monthRange">
                <el-date-picker style="width: 100%" v-model="form.monthRange" type="monthrange" range-separator="-"
                  start-placeholder="开始月份" end-placeholder="结束月份" value-format="yyyy-MM-dd" :clearable="false"
                  :picker-options="pickerOptions" @change="handleSearch">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label-width="10px">
                <el-button type="primary" size="small" @click="handleSearch">筛选</el-button>
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table-wrap">
        <div class="operate-bar">
          <div class="time">{{ range }}</div>
          <div class="tips">
            共服务 <span class="total">{{ page.sums }}</span> 人
          </div>
        </div>
        <div :style="{ height: tableHeight + 'px' }">
          <el-table :data="list" height="100%" v-loading="loading" highlight-current-row tooltip-effect="light"
            :header-cell-class-name="'header_name_style'">
            <el-table-column prop="personName" label="用户姓名" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="cardNo" label="卡号" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="personId" label="人才ID" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="phone" label="手机号码" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="cardTypeName" label="所属项目" min-width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="rateList" label="服务次数" min-width="100">
              <template slot-scope="scope">
                <span>{{
                  Array.isArray(scope.row.reportList)
                    ? scope.row.reportList.length
                    : 0
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pager" v-if="list.length > 0">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="page.sums" background></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import page from "@/mixin/page";
import { performanceServersUserNum } from "@/api/index";
export default {
  components: {},
  mixins: [page],
  props: {
    consultantInfo: {
      type: Object,
      default: null,
    },
    cardTypeOptions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tableHeight: "auto",
      loading: false,
      range: "",
      list: [],
      form: {
        cardNo: "",
        personName: "",
        personId: "",
        phone: "",
        monthRange: [],
        cardType: "",
      },
      selectedRow: {},
    };
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate(time) {
          const date1 = new Date("2023-09-01");
          const date2 = new Date(
            new Date().getFullYear() +
              "-" +
              ("0" + (new Date().getMonth() + 1)).substr(-2) +
              "-" +
              ("0" + new Date().getDate()).substr(-2)
          );
          const diff = date2 - date1 + 60 * 60 * 24 * 1000;
          return (
            time.getTime() < Date.now() - diff || Date.now() < time.getTime()
          );
        },
      };
    },
  },
  async created() {
    this.form.monthRange = this.consultantInfo.monthRange;
    window.addEventListener("resize", this.getHeight);
    this.getData();
  },
  mounted() {
    this.getHeight();
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
  methods: {
    getUnfinishedTaskNum(list) {
      console.log("🚀 ~ getUnfinishedTaskNum ~ list:", list);

      const temp = (list || []).filter((item) => item.finishType != 2);
      return temp.length;
    },
    getData() {
      this.loading = true;
      let params = {
        consultantId: this.consultantInfo.consultantId,
        cardNo: this.form.cardNo,
        personName: this.form.personName,
        cardType: this.form.cardType,
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
      };
      if (this.form.monthRange.length) {
        const year = this.form.monthRange[1].slice(0, 4);
        const month = this.form.monthRange[1].slice(5, 7);
        const lastDay = this.getLastDay(year, month);
        params.startTime = this.form.monthRange[0] + " 00:00:00";
        params.endTime =
          this.form.monthRange[1].slice(0, 7) + "-" + lastDay + " 23:59:59";

        this.range = `${this.form.monthRange[0].replace(/-/g, ".")} - ${(
          this.form.monthRange[1].slice(0, 7) +
          "." +
          lastDay
        ).replace("-", ".")}`;
      }
      console.log("-----performanceServersUserNum------>",params);
      performanceServersUserNum(params)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            res.data.forEach((item) => {
              item.currentName = this.getCurrentRightName(item);
              const tempArr = [];
              item.rightList.forEach((item) => {
                if (item.finishType == 2) {
                  tempArr.push(item);
                }
              });
              if (tempArr.length) {
                tempArr[tempArr.length - 1].isActive = true;
              }
            });
            this.list = res.data;
            this.page.sums = res.pageparam.sums;
          } else {
            this.loading = false;
            this.$message.error(res.status_desc);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getCurrentRightName(item) {
      if (item.personId == "0" || !item.personId) {
        return {
          name: "未激活",
          value: "1",
        };
      }
      const rightList = item.rightList;

      const unStartStatusArray = [];
      rightList.forEach((item) => {
        if (item.finishType == 0) {
          unStartStatusArray.push(item);
        }
      });
      if (unStartStatusArray.length == rightList.length) {
        return {
          name: "未开始",
          value: "2",
        };
      }

      const finishStatusArray = [];
      rightList.forEach((item) => {
        if (item.finishType == "2") {
          finishStatusArray.push(item);
        }
      });
      if (finishStatusArray.length == rightList.length) {
        return {
          name: "已完成",
          value: "4",
        };
      }
      const tempArr = [];
      rightList.forEach((item) => {
        if (item.finishType == 2 || item.finishType == 1) {
          tempArr.push(item);
        }
      });
      if (tempArr.length) {
        return {
          name: tempArr[tempArr.length - 1].rightName,
          value: "3",
        };
      }
    },
    getLastDay(year, month) {
      const date = new Date(year, month, 0);
      return date.getDate();
    },
    getHeight() {
      this.tableHeight =
        window.innerHeight - this.$refs.searchBar.offsetHeight - 265;
    },
    async handleSearch() {
      this.$set(this.page, "currentPage", 1);
      this.getData();
    },
    handleReset() {
      this.form.title = "";
      this.form.personName = "";
      this.form.cardNo = "";
      this.form.personId = "";
      this.form.phone = "";
      this.form.cardType = "";
      this.form.monthRange = [];
      this.range = "";
      this.handleSearch();
    },
  },
};
</script>

<style>
.el-popover.el-popper.el-popover-self {
  min-width: 20px !important;
}
</style>

<style lang="scss" scoped>
.item-wrapper {
  .rl-content {
    border-radius: 8px 0 0 0;
    background-color: #fff;
    .search-box {
      padding: 12px 12px 0 12px;
      ::v-deep .el-form-item {
        margin-bottom: 14px;
      }
    }
    .table-wrap {
      box-shadow: 0 0 0 0;
      padding: 7px 12px 17px 12px;
      overflow: hidden;
      .operate-bar {
        display: flex;
        align-items: center;
        margin: 0 0 17px 14px;
        .time {
          font-size: 16px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #222222;
          position: relative;
          &::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 14px;
            background-color: $primary-color;
            position: absolute;
            left: -12px;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .tips {
          margin-left: 24px;
          font-size: 16px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #222222;
          .total {
            color: $primary_color;
          }
        }
        /deep/ .el-button--small.is-round {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #555555;
        }
      }
      .operation-button {
        /deep/ .el-button--text {
          font-weight: 400;
        }
      }
    }
    .pointer {
      cursor: pointer;
    }
    .danger {
      color: #f56c6c;
    }
    .success {
      color: #67c23a;
    }
  }
}

.list-box {
  .item {
    display: flex;
    justify-content: space-between;
    color: #999;
    padding: 2px 0;

    .isActive {
      color: #1890ff;
    }
    .finish-type {
      margin-left: 5px;
    }
    .unfinishColor {
      color: #999999;
    }
    .doingColor {
      color: #6a4aff;
    }
    .finishColor {
      color: #000000;
    }
  }
}

/deep/ .el-col-12 {
  width: 25%;
}

/deep/ .el-range-editor--small .el-range-separator {
  line-height: 24px;
  font-size: 13px;
  width: 25px;
}
/deep/ .header_name_style {
  font-size: 14px;
  font-family: PingFang-SC, PingFang-SC;
  font-weight: bold;
  color: #6c7481;
}
</style>
